<template>
	<section class="wrapper">
		<transition :name="transitionName">
			<router-view class="view"></router-view>
		</transition>
		<common-footer/>
	</section>
</template>
<script>
  import CommonFooter from '../CommonFooter'
  export default {
    name: 'RouteView',
    components: {CommonFooter},
	  data() {
		  return {
			  transitionName: 'slide-left'
		  }
	  },
	  watch: {
		  $route(to, from) {
			  const toDepth = to.path.split('/').length
			  const fromDepth = from.path.split('/').length
			  this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
		  },
		  transitionName(val) {
			  console.log(val)
		  }
	  }
  }
</script>
<style lang="less" scoped>
	.wrapper {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(100vh - 1.333rem);
		/*overflow: hidden;*/
    background: rgb(243, 251, 255);
	}
	.view {
		transition: all 0.3s cubic-bezier(.55, 0, .1, 1);
	}

	.slide-left-enter, .slide-right-leave-active {
		opacity: 0;
		transform: translate(30px, 0);
	}

	.slide-left-leave-active, .slide-right-enter {
		opacity: 0;
		transform: translate(-30px, 0);
	}
</style>
